import CodeMirrorWrapper from "@/components/CodeMirrorWrapper";
import { Box, Grid, Typography, Paper, alpha } from "@mui/material";
import { memo } from "react";
import CodeIcon from '@mui/icons-material/Code';
import DataObjectIcon from '@mui/icons-material/DataObject';

/**
 * 编辑器区域组件
 */
const EditorSection = memo(({
    ftl,
    json,
    setFtl,
    setJson
}: {
    ftl: string;
    json: string;
    setFtl: (value: string) => void;
    setJson: (value: string) => void;
}) => (
    <Box>
        <Grid container spacing={3}>
            <Grid item xs={12} md={6}>
                <Paper 
                    elevation={0}
                    sx={{ 
                        p: 2, 
                        borderRadius: 2,
                        bgcolor: alpha('#2e7d32', 0.05),
                        border: `1px solid ${alpha('#2e7d32', 0.2)}`
                    }}
                >
                    <Typography 
                        variant="subtitle1" 
                        sx={{ 
                            mb: 2, 
                            fontWeight: 600,
                            display: 'flex',
                            alignItems: 'center',
                            gap: 1,
                            color: '#2e7d32'
                        }}
                    >
                        <CodeIcon fontSize="small" />
                        FTL 模板
                    </Typography>
                    <CodeMirrorWrapper
                        label=""
                        value={ftl}
                        onChange={setFtl}
                        height="400px"
                        language="html"
                        placeholder='请输入 Freemarker 模板代码...'
                    />
                </Paper>
            </Grid>
            
            <Grid item xs={12} md={6}>
                <Paper 
                    elevation={0}
                    sx={{ 
                        p: 2, 
                        borderRadius: 2,
                        bgcolor: alpha('#1976d2', 0.05),
                        border: `1px solid ${alpha('#1976d2', 0.2)}`
                    }}
                >
                    <Typography 
                        variant="subtitle1" 
                        sx={{ 
                            mb: 2, 
                            fontWeight: 600,
                            display: 'flex',
                            alignItems: 'center',
                            gap: 1,
                            color: '#1976d2'
                        }}
                    >
                        <DataObjectIcon fontSize="small" />
                        JSON 数据
                    </Typography>
                    <CodeMirrorWrapper
                        label=""
                        value={json}
                        onChange={setJson}
                        height="400px"
                        language="json"
                        placeholder='请输入 JSON 数据...'
                    />
                </Paper>
            </Grid>
        </Grid>
    </Box>
));

export default EditorSection;